<div class="topbar" data-dropdown="dropdown">
  <div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container-fluid">
        <a class="brand" href="/">TwitCockpit α</a>
        <div class="nav-collapse">
          <ul class="nav">
            <li>
              <a href="/dock/">Home</a>
            </li>
            <li>
              <a href="#about">About</a>
            </li>
            <li>
              <a href="#null">null</a>
            </li>
            <li>
              <a href="#null">null</a>
            </li>
            <li>
              <a href="#null">null</a>
            </li>
          </ul>
          <ul id="loginmenu" class="nav pull-right">
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
<script id="topmenu-login-template" type="text/x-jquery-tmpl">
  <li>
    <a href="/authentication/">ログイン</a>
  </li>
</script>
<script id="topmenu-myinfo-template" type="text/x-jquery-tmpl">
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">${twitterScreenName}<b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li>
        <a href="#">Secondary link</a>
      </li>
      <li>
        <a href="#">Something else here</a>
      </li>
      <li class="divider">
      </li>
      <li>
        <a href="/authentication/logout">ログアウト</a>
      </li>
    </ul>
  </li>
</script>
<script>
  $.get("/authentication/loginInfo", {}, function(data){
      if (data.loginInfo == null) {
          $("#topmenu-login-template").tmpl().appendTo("#loginmenu");
      }
      else {
          $("#topmenu-myinfo-template").tmpl(data.loginInfo).appendTo("#loginmenu");
      }
  });
</script>
